<template>
  <div class="me">
    <h4>登录页</h4>
    <input type="text" placeholder="电话" v-model="formData.phone">
    <br>
    <input type="password" placeholder="密码" v-model="formData.pass">
    <br>
    <div>
    <span @click="login()">登录</span>
    <span @click="$router.push('/register')">注册</span>
    </div>
  </div>
</template>

<script>
import {userlogin} from '../utils/api'
export default {
    data(){
        return{
            formData:{
                phone:'',
                pass:''
            }
        }
    },
    methods:{
      login(){
       if ( /^1[3-9]\d{9}$/.test( this.formData.phone ) == false) {
        alert('请输入合法的手机号');
       }else if(!this.formData.pass){
        alert('请输入密码')
       }else{
         userlogin(this.formData).then((res)=>{
             if (res.data.code=200) {
                     localStorage.setItem('token',res.data.token);
                     localStorage.setItem('userinfo', JSON.stringify( res.data.userinfo ) );
                     this.$router.push('/index')
             }else{
                 alert('登录失败')
             }
             })
       }
         
      }
    }
}
</script>

<style lang="scss" scoped>
.me{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 10vw;
}
.me input{
    width: 80vw;
    height: 8vw;
    outline: none;
    background: white;
    border: 1px solid #ccc;
    margin-bottom: 5vw;
    border-radius: 25vw;
}
.me span{
    display: block;
    width: 80vw;
    height: 8vw;
    background: #e9e9ed;
    border: 1px solid #ccc;
    border-radius: 4vw;
    text-align: center;
    margin-bottom: 2vw;
    
}
</style>